<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<body>
    <div id="app">
        <!--<router-link to="/content">内容</router-link>-->
        <router-view></router-view>
        <router-view class="news" name="news"></router-view>
        <router-view class="slide" name="slide"></router-view>
    </div>

    <script type="text/x-template" id="menu">
        <div>
1
        </div>
    </script>

    <script type="text/x-template" id="news">
        <div>
2
        </div>
    </script>

    <script type="text/x-template" id="slide">
        <div>
3
        </div>
    </script>


<script>

    const menu={
        template:'#menu',
    };
    const news={
        template:'#news',
    };

    const slide={
        template:'#slide',
    };
    //组件交给路由器
    let route = new VueRouter({
        routes:[
            {path:'/',components:{
                default:menu,
                news:news,
                slide:slide,

            }},

        ]
    });


    var app=new Vue({
        el:'#app',
        router:route,
    });

</script>

</body>
</html>